<template>
    <section class="home-wrapper">
        <section class="home-navbar mt-50 mb-10">
            <img src="/@/assets/logo.png" style="width: 300px;" alt="">
            <section class="flex-wrapper mt-20">
                <h3 class="primary-color mr-8">引进人才</h3>
                <el-icon size="14" ><ArrowRight/></el-icon>
                <h3 class="primary-color ml-8">首页</h3>
            </section>
        </section>
        <el-card style="width: 1100px" shadow="always">
            <template #header>
                <div class="card-header flex-wrapper">
                    <h3 >在办业务进度</h3>
                    <section class="flex-wrapper c-pointer" @click="previewAll">
                        <span  class="primary-color" style="font-size: 14px;">查看全部</span>
                        <el-icon size="13" color="#409EFF"><ArrowRightBold /></el-icon>
                    </section>
                </div>
            </template>
            <section>
                <table class="custome-table-wrapper">
                    <thead class="custome-table-thead">
                        <tr class="custome-table-tr">
                            <th class="border-r">引进人才类型</th>
                            <th class="border-r">业务办理类型</th>
                            <th class="border-r">业务办理进度</th>
                            <th class="border-r">申请日期</th>
                            <th>操作</th> 
                        </tr>
                    </thead>
                    <tbody class="custome-table-tbody">
                        <tr v-for="t of tableData" :key="t.id">
                            <td>{{ talent_type[t.talentType].label  }}</td>
                            <td>{{ busi_type[t.busiType].label }}</td>
                            <td>{{ progress_type[t.progressType].label }}</td>
                            <td>{{ formatDate(new Date(t.createTime), 'YYYY-mm-dd HH:MM:SS') }}</td>
                            <td>
                                <el-link type="primary" @click="previewAll">查看</el-link>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </el-card>
    </section>
</template>

<script setup lang="ts">
import {ArrowRight, ArrowRightBold} from '@element-plus/icons-vue'
import { useCrmTalentApi } from '/@/api/system/talent';
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { formatDate } from '/@/utils/formatTime'

const { proxy } = getCurrentInstance(); 
const { sys_user_sex,talent_type,busi_type,progress_type,talent_nationality,talent_political,talent_marrige,domestic_highest_degree,domestic_audit_status,domestic_highest_diploma } = proxy.parseDict("talent_type","sys_user_sex",
        "busi_type","progress_type","talent_nationality","talent_political","talent_marrige","domestic_highest_degree","domestic_audit_status","domestic_highest_diploma");
const router = useRouter()
const useCrmTalent = useCrmTalentApi();
const tableData = ref([])

const previewAll = () => {
    router.push('/client/detail')
}

onMounted(() => {
    getTalentDataList()
})

const getTalentDataList = async () => {
    useCrmTalent.getCrmTalentById(1).then(res => {
        tableData.value = res ? [res] : [];
        console.log(res);
    })
}
</script>

<style scoped>
.flex-wrapper{
    display: flex;
    align-items: center;
}
.home-wrapper{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-navbar{
    width: 1100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.card-header{
    justify-content: space-between; 
}
.border-r{
    border-right: 1px solid #ccc;
}
.custome-table-wrapper{
    width: 100%;
    font-size: 14px;
    .custome-table-tr{
        display: flex;
        justify-content: space-between;
        background-color: rgb(223, 240, 204);
        padding: 10px 0;
    }
    th{ 
        flex: 1;
        font-weight: 400;
    }
    .custome-table-tbody{
        tr{
            display: flex;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: #f3f3f3 1px solid;
        }
        td{
            flex: 1;
            text-align: center;
            font-weight: 400;
        }
    }
}

</style>